<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
	<title>主页面</title>
	<link rel="shortcut icon" href="#" />
	<link rel="stylesheet" href="../layui/css/layui.css" />
	<script type="text/javascript" src="../layui/layui.js"></script>
	<script type="text/javascript" src="../js/axios.min.js"></script>
	<script type="text/javascript" src="../js/QS.js"></script>
	<script type="text/javascript" src="../js/vue.js"></script>
	<script type="text/javascript" src="../js/jquery1.9.1.js"></script>
	<script type="text/javascript" src="../js/common.js"></script>
	<style>
		#role-name {
			color: #0094FF;
		}

		.layui-table-cell {
			white-space: normal;
			height: auto !important;
			word-break: break-all;
		}
	</style>
</head>

<body>
	<!--头部信息-->
	<div class="layui-fluid layui-bg-cyan" style="height: 50px;line-height: 50px;">
		<div class="layui-row">
			<div class="layui-col-md12" style="text-align: right;">
				您好!<span id="user-name"></span>您的身份为&nbsp;<span id="role-name"></span> |
				<a href="#" style="color: orangered;" onclick="logout()">退出</a>
			</div>
		</div>
	</div>
	<!--左侧导航栏-->
	<div class="layui-fluid ">
		<div class="layui-col-md2" id="main">
			<ul class="layui-nav layui-nav-tree" lay-filter="test" id="menu-list">
				<li class="layui-nav-item" v-for="menu in menuList">
					<a href="javascript:void(0);" :data-link="menu.menuLink">{{menu.menuName}}</a>
				</li>
			</ul>
		</div>
		<div class="layui-col-md10" id="content" style="padding-top: 50px;"></div>
	</div>
</body>

<script>
	// 创建实例时设置配置的默认值
	var instance = axios.create({
		userId: "",
		userRoles: [],
		fileName: ""
	});

	layui.use(["element", "table", "form", "layer"], function (element, table, form, layer) {
		//判断用户是否登录，如果未登录，则直接返回登录页面
		axios.get(serverPath + "/users/info", {
			headers: {
				"auth-token": getToken()
			}
		}).then(function (res) {
			console.log("判断用户是否登录:");
			console.log(res);
			var user = res.data.data;
			// 在实例已创建后修改默认值
			instance.defaults.userId = user.userId;
			instance.defaults.userRoles = user.roles;
			$("#user-name").html(user.username);
			var roles = user.roles;
			if ($.inArray("ROLE_ADMIN", roles) != -1) {
				$("#role-name").html("管理员");
			}
			if ($.inArray("ROLE_TEACHER", roles) != -1) {
				$("#role-name").html("老师");
			}
			if ($.inArray("ROLE_STUDENT", roles) != -1) {
				$("#role-name").html("学生");
			}
		}).catch(function (error) {
			location.href = "login.html";
		});

		//获取菜单
		var app = new Vue({
			el: "#main",
			data: {
				menuList: []
			}, mounted() {
				var that = this;
				//获取菜单
				axios.get(serverPath + "/menus", {
					headers: {
						"auth-token": getToken()
					}
				}).then(function (response) {
					that.menuList = response.data.data;
				}).catch(function (error) {
					console.log(error);
					layer.alert(error.response.data.error)
				});
			}
		});

		//左侧菜单栏的点击事件
		$(document).on("click", "#menu-list>li", function (e) {
			var $target = $(e.target);
			axios.get($target.attr("data-link")).then(function (res) {
				$("#content").html(res.data);
			});
		});

		//退出登录
		window.logout = function () {
			localStorage.removeItem("token");
			location.href = "login.html";
		};
	});
</script>



</html>